<template>
    <view class="page">
        <privacy></privacy>
        <Header isTab> {{miniProgramName}} </Header>
        <div class="info">
            <div class="search fx" @click="$go('searchResult')">
                <div class="icon">
                    <Nimg src="001.png" width="26" height="27" />
                </div>
                <input
                    type="text"
                    placeholder="请输入关键词搜索"
                    confirm-type="search"
                    @confirm="searchNow"
                />
            </div>
            <div class="banner2">
                <swiper
                    :indicator-dots="true"
                    :interval="5000"
                    style="height: 374rpx"
                    circular
                    indicator-color="rgba(0,0,0,.2)"
                    indicator-active-color="#01c35e"
                >
                    <swiper-item
                        :key="index"
                        v-for="(i, index) in banner2"
                        @click="$go('singlePage?id=' + i.link)"
                    >
                        <Nimg
                            :src="i.src"
                            width="679"
                            height="374"
                            mode="widthFix"
                        />
                    </swiper-item>
                </swiper>
            </div>

            <div style="height: 10rpx"></div>

            <div class="banner">
                <swiper
                    :indicator-dots="true"
                    :interval="5000"
                    style="height: 260rpx"
                    circular
                    indicator-color="rgba(0,0,0,.2)"
                    indicator-active-color="#01c35e"
                >
                    <swiper-item
                        :key="index"
                        v-for="(i, index) in banner"
                        @click="$go('kechengxiangqing?id=' + i.link)"
                    >
                        <Nimg
                            :src="i.src"
                            width="679"
                            height="260"
                            mode="aspectFill"
                        />
                    </swiper-item>
                </swiper>
            </div>

            <div class="kctj">
                <div class="bt fx">课程推荐</div>
                <div class="btl">
                    <Nimg src="004.png" width="32" height="6" />
                </div>
                <div class="tabsWrap">
                    <div class="tabs fx">
                        <div
                            class="item fx jcc"
                            v-for="(i, index) in types"
                            :key="index"
                            :class="{ on: index === activeIndex }"
                            @click="activeIndex = index"
                        >
                            {{ i.name }}
                        </div>
                    </div>
                </div>
                <div class="group">
                    <div
                        class="item fx"
                        v-for="(i, index) in proList"
                        :key="index"
                        @click="$go('kechengxiangqing?id=' + i.Id)"
                    >
                        <div class="img">
                            <Nimg
                                :src="i.thumb_src + i.photo"
                                width="181"
                                height="181"
                            />
                        </div>
                        <div class="irr fx1">
                            <div class="name">
                                {{ i.name }}
                            </div>
                            <div class="ims">
                                {{ i.info }}
                            </div>
                            <div class="ibot fx">
                                <div class="price fx">
                                    <div class="dw">￥</div>
                                    <div class="num">{{ i.price }}</div>
                                </div>
                                <div class="yj">原价￥{{ i.oprice }}</div>
                                <div class="fx1"></div>
                                <div class="ys">已售{{ i.sold_num }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="height: 200rpx"></div>
        </div>
        <custom-tab-bar active="index"></custom-tab-bar>
    </view>
</template>

<script>
import $ from "@/common";
export default {
    data() {
        return {
            banner: [],
            banner2: [],
            types: [],
            activeIndex: 0,
            proList: [],
            share: {},
			miniProgramName: wx.getExtConfigSync().miniProgramName
        };
    },
    watch: {
        activeIndex() {
            this.getProList();
        },
    },
    methods: {
        getBanner() {
            let url = $.index("bannerList");
            $.post(url).then((res) => {
                if (res.isError) {
                    return;
                }
                this.banner = $.change(res);
            });
        },
        getBanner2() {
            let url = $.index("bannerList1");
            $.post(url).then((res) => {
                if (res.isError) {
                    return;
                }
                this.banner2 = $.change(res);
            });
        },
        getTypes() {
            let url = $.index("productTypeList");
            $.post(url).then((res) => {
                if (res.isError) {
                    return;
                }
                this.types = $.change(res);
                this.getProList();
            });
        },
        getProList() {
            let url = $.index("courseList");
            let data = {
                type: this.types[this.activeIndex].Id,
            };
            $.post(url, data).then((res) => {
                if (res.isError) {
                    return;
                }
                this.proList = $.change(res);
            });
        },
        getShare() {
            let url = $.index("share");

            $.post(url).then((res) => {
                if (res.isError) {
                    return;
                }

                this.share = res;
            });
        },
        init() {
            this.getBanner();
            this.getBanner2();
            this.getTypes();
            this.getShare();
        },
    },
    onShow() {
        this.init();
    },
    onLoad(o) {
        if (o.user_id) {
            $.setLocal("tuijianren", o.user_id);
        }
        uni.hideTabBar();
    },
    onShareAppMessage: function (res) {
        let userId = $.getLocal("userId");
        let title = this.share.content;
        let path = "/pages/index?user_id=" + userId;
        let imageUrl = $.domain + this.share.photo;
        if (res.from === "button") {
            // 来自页面内转发按钮
        }
        return {
            title,
            path,
            imageUrl,
        };
    },
};
</script>

<style lang="less" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background: #fff;
    .search {
        background: #f1f1f1;
        width: 645rpx;
        height: 60rpx;
        border-radius: 100rpx;
        margin: 0 auto;
        .icon {
            padding: 0 30rpx;
        }
    }
    .banner {
        width: 679rpx;
        height: 260rpx;
        margin: 0 auto;
        margin-top: 25rpx;
        border-radius: 10rpx;
        overflow: hidden;

        .my-swipe .van-swipe-item {
            img {
                width: 100%;
            }
        }
    }
    .banner2 {
        width: 679rpx;
        height: 374rpx;
        margin: 0 auto;
        margin-top: 25rpx;
        border-radius: 10rpx;
        overflow: hidden;

        .my-swipe .van-swipe-item {
            img {
                width: 100%;
            }
        }
    }

    .tabsWrap {
        width: 100%;
        height: 80rpx;
        overflow-y: hidden;
    }

    .tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow: auto;
        .item {
            height: 100rpx;
            margin-right: 50rpx;
            font-size: 32rpx;
            flex-shrink: 0;
            &.on {
                color: #20d381;
                font-weight: bold;
            }
        }
    }

    .kctj {
        margin-top: 38rpx;
        margin-left: 40rpx;
        margin-right: 40rpx;
        .bt {
            font-size: 38rpx;
            font-weight: bold;
        }
        .group {
            .item {
                margin-top: 55rpx;
                .irr {
                    height: 180rpx;
                    padding-left: 26rpx;
                    .name {
                        font-size: 30rpx;
                        font-weight: bold;
                        line-height: 1.2;
                    }
                    .ims {
                        font-size: 22rpx;
                        color: #8b8b8b;
                        margin-top: 20rpx;
                    }
                    .ibot {
                        padding-top: 20rpx;
                        .price {
                            color: #e62000;
                            font-weight: bold;
                            font-size: 38rpx;
                            .dw {
                                font-size: 20rpx;
                                font-weight: normal;
                                padding-top: 6rpx;
                            }
                        }
                        .yj {
                            margin-left: 12rpx;
                            color: #909090;
                        }
                        .ys {
                            color: #898989;
                        }
                    }
                }
            }
        }
    }
}
</style>

